class Slider{
    constructor(selector){        
        this.big_box = document.querySelector(selector);        
        this.ul_li = this.big_box.children[0].children;        
        this.num = this.ul_li.length;        
        this.ol_li = this.addEle(); //有返回值 所有的小圆点。        
        this.cur_index = 0;        
        this.addEvent();        
        this.slide();        
        this.autoPlayer();
    }
    addEle(){
        this.lt_span = document.createElement('span');
        this.lt_span.id = 'ltBtn';       
        this.lt_span.innerHTML = '&lt;';        
        this.big_box.appendChild(this.lt_span);        
        this.rt_span = document.createElement('span');        
        this.rt_span.id = 'rtBtn';        
        this.rt_span.innerHTML = '&gt;';       
        this.big_box.appendChild(this.rt_span);        
        this.div = document.createElement('div');        
        this.div.id = 'msg';        
        this.big_box.appendChild(this.div);        
        let ol = document.createElement('ol');       
        let arr = [];       
        for(let i = 0;i < this.num;i ++){            
            let li = document.createElement('li');
            ol.appendChild(li); 
            arr.push(li); 
        }
        this.big_box.appendChild(ol);        
        return arr;
    }  
    addEvent(){       
        this.lt_span.onclick = function(){
            
            this.cur_index --;           
            if(this.cur_index === -1){
                this.cur_index = this.num - 1;
            }            
            this.slide();
        }.bind(this);              
        this.rt_span.onclick = function(){
            //     当前下标 ++
            this.cur_index ++;
            //     if(当前下标 === length){
            //         当前下标 = 0
            //     }
            if(this.cur_index === this.num){
                this.cur_index = 0;
            }
            //     调用轮播函数。
            this.slide();
        }.bind(this);
        
        // 3. 给小圆点添加移入事件
        for(let i = 0;i < this.num;i ++){
            this.ol_li[i].onmouseenter = function(){
                //     当前下标 = 移入的下标。
                this.cur_index = i;
                //     调用轮播函数
                this.slide();
            }.bind(this);
        }
        
    }
    //实现轮播
    slide(){      
        for(let i = 0;i < this.num;i ++){
            // 大图： 所有的大图display = 'none';
            this.ul_li[i].style.display = 'none';
            // 小圆点： 所有的小圆点backgroundColor = red
            this.ol_li[i].style.backgroundColor = 'rgba(0,0,0,.4)';
        }
        //     当前的大图display = 'block'
        this.ul_li[this.cur_index].style.display = 'block';
        //     当前的小圆点backgroundColor = blue
        this.ol_li[this.cur_index].style.backgroundColor = 'blue';
      }
    //自动轮播
    autoPlayer(){
        this.timer = setInterval(() => {
            this.cur_index ++;
            if(this.cur_index === this.num){
                this.cur_index = 0
            }
            this.slide();
        },2000)
        //当鼠标移入大盒子时，取消自动轮播
        this.big_box.onmouseenter = function(){
            clearInterval(this.timer);
        }.bind(this);
        //当鼠标移出大盒子时，开启自动轮播
        this.big_box.onmouseleave = function(){
            this.autoPlayer();
        }.bind(this);
    }
}
new Slider('#slide1');